<template>
  <div id="Hiring">
    <el-row>
      <el-col :span="22" :offset="1">
        <el-col :span="3">
          <div class="menu-box">
            <ul>
              <li>
                <div class="menu-item" @click="toOther('/hiring/onlinebooking')">
                  <i class="fa fa-envelope-o fa-2x"></i>
                  <p>在线预定</p>
                </div>
              </li>
              <li>
                <div class="menu-item" @click="toOther('/hiring/mybooth')">
                  <i class="fa fa-twitch fa-2x"></i>
                  <p>我的展位</p>
                </div>
              </li>
              <li>
                <div class="menu-item" @click="toOther('/hiring/attendinghistory')">
                  <i class="fa fa-archive fa-2x"></i>
                  <p>参会历史</p>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="21" style="min-height:30em;">
          <router-view></router-view>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Hiring',
    data () {
      return {}
    },
    created () {

    },
    methods: {
      toOther (path) {
        this.$router.push({path: path})
      }
    },
    components: {}
  }

</script>

<style scoped>
  #Hiring {
    margin-top: 2em;
  }

  li {
    list-style: none;
    margin: 0.3em;
  }

  .menu-box {
    float: left;
    margin-right: 1em;
  }

  .menu-item {
    background: #FAFAFA;
    border: 1px solid #F2F2F2;
    padding: 10px;
    text-align: center;
    color: #999;
  }

  .menu-item:hover {
    color: #20A0FF;
    background: #fff;
    border: 1px solid #e8e8e8;
  }
</style>
